@import '../../../themes/basic/base-all.less';

:host {
  --ti-timeline-badge-width: var(--ti-common-size-2x);
  --ti-timeline-line-width: 1px;
  --ti-timeline-label-line-height: calc(var(--ti-common-font-size-base) * var(--ti-common-line-height-number));
  --ti-timeline-level1-width: 14px;
  --ti-timeline-level1-border-weight: var(--ti-common-border-weight-normal);
  --ti-timeline-level1-line-height: calc(var(--ti-common-font-size-1) * var(--ti-common-line-height-number));
  --ti-timeline-current-border-weight: var(--ti-common-border-weight-1);
}

.ti3-timeline-container {
  position: relative;
  padding-bottom: calc(var(--ti-common-space-5x));
  list-style: none;
  font-weight: var(--ti-common-font-weight-4);
  &:after {
    content: '';
    left: calc(-1 * var(--ti-timeline-line-width) / 2);
    position: absolute;
    top: calc((var(--ti-timeline-label-line-height) + var(--ti-timeline-badge-width)) / 2);
    width: var(--ti-timeline-line-width);
    height: calc(100% - var(--ti-timeline-badge-width));
    background-color: var(--ti-common-color-line-dividing);
  }
  &:last-child {
    padding-bottom: 0;
    &:after {
      display: none;
    }
  }
}
// 只有多级信息场景下，时间轴线条才会变色
.ti3-timeline-multistage .ti3-timeline-container.ti3-timeline-completed {
  &:after {
    background-color: var(--ti-common-color-success);
  }
}
.ti3-timeline-label {
  font-size: var(--ti-common-font-size-base);
  display: block;
  padding-left: var(--ti-common-space-5x);
  line-height: var(--ti-common-line-height-number);
  color: var(--ti-common-color-text-primary);
  position: relative;
  word-wrap: break-word;
  &:before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--ti-timeline-badge-width) / 2);
    top: calc((var(--ti-timeline-label-line-height) - var(--ti-timeline-badge-width)) / 2);
    width: var(--ti-timeline-badge-width);
    height: var(--ti-timeline-badge-width);
    background-color: var(--ti-common-color-line-dividing);
    border-radius: var(--ti-common-border-radius-3);
    z-index: 1;
  }
}
.ti3-timeline-multistage {
  padding-left: var(--ti-common-space-2x);
  .ti3-timeline-label {
    color: var(--ti-common-color-text-weaken);
  }
  .ti3-timeline-success {
    color: var(--ti-common-color-text-primary);
  }
  .ti3-timeline-time-level2 {
    display: inline-block;
    padding-left: var(--ti-common-space-3x);
  }
}
// 当前进行中的步骤，水波纹样式
.ti3-timeline-currentStep {
  &:before {
    left: calc(-1 * var(--ti-timeline-badge-width) / 2 - var(--ti-timeline-current-border-weight));
    top: calc((var(--ti-timeline-label-line-height) - var(--ti-timeline-badge-width)) / 2 - var(--ti-timeline-current-border-weight));
    background-color: var(--ti-common-color-success);
    background-clip: content-box;
    border: var(--ti-timeline-current-border-weight) var(--ti-common-border-style-solid) rgba(80, 212, 171, 0.2);
  }
}
.ti3-timeline-multistage .ti3-timeline-danger {
  &:before {
    background-color: var(--ti-common-color-error-text);
    border: var(--ti-timeline-current-border-weight) var(--ti-common-border-style-solid) rgba(222, 80, 78, 0.2);
  }
}
.changecolor(@color) {
  background-color: @color;
  border-color: @color;
}
.ti3-timeline-info:before {
  .changecolor(var(--ti-common-color-prompt));
}
.ti3-timeline-success:before {
  .changecolor(var(--ti-common-color-success));
}
.ti3-timeline-warning:before {
  .changecolor(var(--ti-common-color-warn));
}
.ti3-timeline-danger:before {
  .changecolor(var(--ti-common-color-error));
}
.ti3-timeline-time {
  font-size: var(--ti-common-font-size-base);
  line-height: var(--ti-common-line-height-number);
  color: var(--ti-common-color-text-weaken);
  display: block;
  white-space: pre;
}

.ti3-timeline-active {
  color: var(--ti-common-color-text-success);
}
.ti3-timeline-active-danger {
  color: var(--ti-common-color-error-text);
}

.ti3-timeline-level1 {
  width: var(--ti-timeline-level1-width);
  height: var(--ti-timeline-level1-width);
  text-align: center;
  line-height: calc(var(--ti-timeline-level1-width) + var(--ti-timeline-level1-border-weight));
  display: inline-block;
  border: var(--ti-timeline-level1-border-weight) var(--ti-common-border-style-solid) var(--ti-common-color-text-weaken);
  border-radius: var(--ti-common-border-radius-3);
  color: var(--ti-common-color-text-weaken);
  position: absolute;
  left: calc(-1 * calc(var(--ti-timeline-level1-width) + var(--ti-timeline-level1-border-weight) * 2) / 2);
  top: calc((var(--ti-timeline-level1-line-height) - var(--ti-timeline-level1-width) - var(--ti-timeline-level1-border-weight) * 2) / 2);
  background-color: var(--ti-common-color-bg-white-normal);
  z-index: 1;
  .box-sizing(content-box);
}

.ti3-timeline-level1-success {
  color: var(--ti-common-color-success);
  border-color: var(--ti-common-color-success);
}

.ti3-timeline-processing {
  background: var(--ti-common-color-success);
  color: var(--ti-common-color-text-white);
}

.ti3-timeline-errorMessagg {
  color: var(--ti-common-color-error-text);
  padding-top: var(--ti-common-space-base);
}

.ti3-timeline-label-level1 {
  font-size: var(--ti-common-font-size-1);
}

.ti3-timeline-label-container {
  display: flex;
  align-items: center;
}
.ti3-timeline-icontip {
  font-size: var(--ti-common-font-size-2);
  padding-left: var(--ti-common-space-2x);
  color: var(--ti-common-color-icon-normal);
  vertical-align: bottom;
}

:host[dark] {
  .ti3-timeline-container {
    &:after {
      background: var(--ti-common-color-line-normal);
    }
  }
  .ti3-timeline-label {
    color: var(--ti-common-color-text-darkbg);
    &:before {
      background: var(--ti-common-color-line-normal);
    }
  }
  .ti3-timeline-level1 {
    color: var(--ti-common-color-text-darkbg);
    border-color: var(--ti-common-color-line-normal);
    background-color: var(--ti-common-color-bg-dark-normal);
  }
  .ti3-timeline-level1.ti3-timeline-level1-success {
    color: var(--ti-common-color-success);
    border-color: var(--ti-common-color-success);
  }
  .ti3-timeline-success,
  .ti3-timeline-currentStep {
    &:before {
      background: var(--ti-common-color-success);
      background-clip: content-box;
    }
  }
  .ti3-timeline-currentStep.ti3-timeline-danger {
    &:before {
      background: var(--ti-common-color-error);
      background-clip: content-box;
      border: var(--ti-timeline-current-border-weight) var(--ti-common-border-style-solid) rgba(246, 111, 106, 0.2);
    }
  }
  .ti3-timeline-active-danger,
  .ti3-timeline-errorMessagg {
    color: var(--ti-common-color-error);
  }
  .ti3-timeline-time {
    color: var(--ti-common-color-text-darkbg);
  }
  .ti3-timeline-success {
    color: var(--ti-common-color-text-gray);
  }
  .ti3-timeline-level1.ti3-timeline-processing {
    background-color: var(--ti-common-color-success);
    color: var(--ti-common-color-text-white);
  }
  // 目前深色背景只有tip场景，故深色背景下不会再有问号tip
  .ti3-timeline-icontip {
    display: none;
  }
}
